<template>
  <div class="month-report-all-wrapper">
    <div id="monthReportExcelId" v-show='showChartLoading'
         style="position: absolute;left: 70px;right:0;top: 70px;bottom:70px;overflow:hidden;z-index: 500">
    </div>
    <div class="right-top-tip-wrapper">
      <!--<p class="import-excel-text" @click="importExcelReport()">导出EXCEL</p>-->
      <double-check-filter @confirmDoubleSelect="confirmSingleSelectPlanArea" defaultText="统筹区" :filter="filterN"
                           type="planArea" :isParentLinkChild="true"></double-check-filter>
      <single-list-filter-without-cb :filter="filterN" :type="'reportType'"
                                     @confirmSingleSelect="confirmSingleSelectReportType" ref="reportTypeId">
      </single-list-filter-without-cb>
      <single-list-filter-without-cb :filter="filterN" :type="'years'"
                                     @confirmSingleSelect="confirmSingleSelectYears" ref="yearTypeId">
      </single-list-filter-without-cb>
      <single-list-filter-without-cb :filter="filterN" :type="'month'"
                                     @confirmSingleSelect="confirmSingleSelectMonth" ref="monthTypeId">
      </single-list-filter-without-cb>
      <a class="import-excel-text" :href="importExcelReport()"
         download="exportTownWorksBasicMedicareExcel">导出</a>
    </div>
    <div class="month-report-wrapper" v-if="!showChartLoading" :style="{width:width+'px'}">
      <div class="report-title-text-wrapper">
        <h1 class="report-title-text">城镇职工基本医疗保险运行情况分析(全市)</h1>
      </div>
      <div class="main-table-wrapper">
        <div class="table1-wrapper" id="table-wrapper1" ref="mainTable">
          <div class="main-table-top">
            <div class="main-table-top-left">{{getSelectReportYYMM()}}</div>
            <div class="main-table-top-right">单位：个、人次、万元、床日</div>
          </div>
          <table>
            <tr>
              <td colspan="4">参保情况</td>
              <td colspan="11">{{chartData.leftType[0]}}</td>
              <td colspan="8" class="td-yellow-bg">{{chartData.rightType[0]}}</td>
              <td class="td-yellow-bg" rowspan="4">基金累计结余</td>
            </tr>
            <tr>
              <td rowspan="3">项目</td>
              <td rowspan="3">参保人数</td>
              <td rowspan="3">实际缴费人数</td>
              <td rowspan="3">缴费抚养比</td>
              <td rowspan="3">单位类型</td>
              <td colspan="3">征缴计划</td>
              <td colspan="4">实际征收</td>
              <td rowspan="3">计划征收比</td>
              <td rowspan="3">基金收入合计</td>
              <td rowspan="3">基金收入同比增幅</td>
              <td rowspan="3" class="td-yellow-bg">基金类别</td>
              <td rowspan="3" class="td-yellow-bg-without-border">基金支出合计</td>
              <td class="td-yellow-bg-without-border" colspan="3">&nbsp;</td>
              <td class="td-yellow-bg" colspan="3">基金支出同比</td>
            </tr>
            <tr>
              <td rowspan="2">单位</td>
              <td rowspan="2">个人</td>
              <td rowspan="2">合计</td>
              <td rowspan="2">单位</td>
              <td rowspan="2">个人</td>
              <td rowspan="2">划个账</td>
              <td rowspan="2">划入比</td>
              <td rowspan="1" colspan="3" class="td-yellow-bg">异地结算</td>
              <td rowspan="2" class="td-yellow-bg">{{queryYear - 1}}年同期</td>
              <td rowspan="2" class="td-yellow-bg">增长</td>
              <td rowspan="2" class="td-yellow-bg">增幅</td>
            </tr>
            <tr>
              <td rowspan="1" class="td-yellow-bg">现金报销</td>
              <td rowspan="1" class="td-yellow-bg">省内平台</td>
              <td rowspan="1" class="td-yellow-bg">省外平台</td>
            </tr>
            <tr>
              <td>总计</td>
              <td>{{chartData.insuredAll[0]}}</td>
              <td>{{chartData.insuredAll[1]}}</td>
              <td rowspan="3">{{chartData.insuredRatio[0]}}</td>
              <td>总计</td>
              <td>{{chartData.fundInAll[0]}}</td>
              <td>{{chartData.fundInAll[1]}}</td>
              <td>{{chartData.fundInAll[2]}}</td>
              <td>{{chartData.fundInAll[3]}}</td>
              <td>{{chartData.fundInAll[4]}}</td>
              <td>{{chartData.fundInAll[5]}}</td>
              <td>{{chartData.fundInAll[6]}}</td>
              <td>{{chartData.fundInAll[7]}}</td>
              <td>{{chartData.fundInAll[8]}}</td>
              <td>{{chartData.fundInAll[9]}}</td>
              <td class="td-yellow-bg">总计</td>
              <td class="td-yellow-bg">{{chartData.fundOutAll[0]}}</td>
              <td class="td-yellow-bg">{{chartData.fundOutAll[1]}}</td>
              <td class="td-yellow-bg">{{chartData.fundOutAll[2]}}</td>
              <td class="td-yellow-bg">{{chartData.fundOutAll[3]}}</td>
              <td class="td-yellow-bg">{{chartData.fundOutAll[4]}}</td>
              <td class="td-yellow-bg">{{chartData.fundOutAll[5]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutAll[6]}}</td>
              <td class="td-yellow-bg">{{chartData.fundOutAll[7]}}</td>
            </tr>
            <tr>
              <td>在职</td>
              <td class="red">{{chartData.insuredIn[0]}}</td>
              <td class="red">{{chartData.insuredIn[1]}}</td>
              <td>企业个体</td>
              <td class="red">{{chartData.fundInSelf[0]}}</td>
              <td class="red">{{chartData.fundInSelf[1]}}</td>
              <td>{{chartData.fundInSelf[2]}}</td>
              <td class="red">{{chartData.fundInSelf[3]}}</td>
              <td class="red">{{chartData.fundInSelf[4]}}</td>
              <td class="red">{{chartData.fundInSelf[5]}}</td>
              <td>{{chartData.fundInSelf[6]}}</td>
              <td>{{chartData.fundInSelf[7]}}</td>
              <td>{{chartData.fundInSelf[8]}}</td>
              <td>{{chartData.fundInSelf[9]}}</td>
              <td class="td-yellow-bg">统筹</td>
              <td class="td-yellow-bg red">{{chartData.fundOutPlan[0]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutPlan[1]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutPlan[2]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutPlan[3]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutPlan[4]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutPlan[5]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutPlan[6]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutPlan[7]}}</td>
            </tr>
            <tr>
              <td>退休</td>
              <td class="red">{{chartData.insuredOut[0]}}</td>
              <td class="red">{{chartData.insuredOut[1]}}</td>
              <td>机关事业</td>
              <td class="red">{{chartData.fundInOrgan[0]}}</td>
              <td class="red">{{chartData.fundInOrgan[1]}}</td>
              <td>{{chartData.fundInOrgan[2]}}</td>
              <td class="red">{{chartData.fundInOrgan[3]}}</td>
              <td class="red">{{chartData.fundInOrgan[4]}}</td>
              <td class="red">{{chartData.fundInOrgan[5]}}</td>
              <td>{{chartData.fundInOrgan[6]}}</td>
              <td>{{chartData.fundInOrgan[7]}}</td>
              <td>{{chartData.fundInOrgan[8]}}</td>
              <td>{{chartData.fundInOrgan[9]}}</td>
              <td class="td-yellow-bg">个账</td>
              <td class="td-yellow-bg red">{{chartData.fundOutSelf[0]}}</td>
              <td class="td-yellow-bg">{{chartData.fundOutSelf[1]}}</td>
              <td class="td-yellow-bg">{{chartData.fundOutSelf[2]}}</td>
              <td class="td-yellow-bg">{{chartData.fundOutSelf[3]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutSelf[4]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutSelf[5]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutSelf[6]}}</td>
              <td class="td-yellow-bg red">{{chartData.fundOutSelf[7]}}</td>
            </tr>
            <tr>
              <td class="td-bg-without-border" colspan="23">&nbsp;</td>
            </tr>
            <tr>
              <td rowspan="3">项目</td>
              <td colspan="4">普通门（急）诊</td>
              <td colspan="5">门慢病</td>
              <td colspan="7">住院</td>
              <td colspan="6">就医流向基本情况</td>
            </tr>
            <tr>
              <td rowspan="2">就诊人次</td>
              <td rowspan="2" class="td-bg-without-border">总费用支出</td>
              <td rowspan="1" class="td-bg-without-border">&nbsp;</td>
              <td rowspan="2">次均费用（元）</td>
              <td rowspan="2">就诊人次</td>
              <td rowspan="2" class="td-bg-without-border">总费用支付</td>
              <td colspan="2" class="td-bg-without-border">&nbsp;</td>
              <td rowspan="2">次均费用（元）</td>
              <td rowspan="2">住院人次</td>
              <td rowspan="2" class="td-bg-without-border">总费用支付</td>
              <td colspan="2" class="td-bg-without-border">&nbsp;</td>
              <td rowspan="2">统筹次均支付（元）</td>
              <td rowspan="2">次均费用（元）</td>
              <td rowspan="2">次均住院床日</td>
              <td rowspan="2">外转</td>
              <td rowspan="2">人次</td>
              <td rowspan="2">费用</td>
              <td rowspan="2">次均费用</td>
              <td rowspan="2">统筹支付</td>
              <td rowspan="2">报销比例</td>
            </tr>
            <tr>
              <td rowspan="1">个账支出</td>
              <td rowspan="1">统筹支付</td>
              <td rowspan="1">报销比例</td>
              <td rowspan="1">统筹支付</td>
              <td rowspan="1">报销比例</td>
            </tr>
            <tr>
              <td>合计</td>
              <td>{{chartData.simpleClinicAll[0]}}</td>
              <td>{{chartData.simpleClinicAll[1]}}</td>
              <td>{{chartData.simpleClinicAll[2]}}</td>
              <td>{{chartData.simpleClinicAll[3]}}</td>
              <td>{{chartData.chronicAll[0]}}</td>
              <td>{{chartData.chronicAll[1]}}</td>
              <td>{{chartData.chronicAll[2]}}</td>
              <td>{{chartData.chronicAll[3]}}</td>
              <td>{{chartData.chronicAll[4]}}</td>
              <td>{{chartData.beHospitalizedAll[0]}}</td>
              <td>{{chartData.beHospitalizedAll[1]}}</td>
              <td>{{chartData.beHospitalizedAll[2]}}</td>
              <td>{{chartData.beHospitalizedAll[3]}}</td>
              <td>{{chartData.beHospitalizedAll[4]}}</td>
              <td>{{chartData.beHospitalizedAll[5]}}</td>
              <td>{{chartData.beHospitalizedAll[6]}}</td>
              <td>总计</td>
              <td>{{chartData.moveAll[0]}}</td>
              <td>{{chartData.moveAll[1]}}</td>
              <td>{{chartData.moveAll[2]}}</td>
              <td>{{chartData.moveAll[3]}}</td>
              <td>{{chartData.moveAll[4]}}</td>
            </tr>
            <tr>
              <td>在职</td>
              <td class="red">{{chartData.simpleClinicIn[0]}}</td>
              <td class="red">{{chartData.simpleClinicIn[1]}}</td>
              <td class="red">{{chartData.simpleClinicIn[2]}}</td>
              <td>{{chartData.simpleClinicIn[3]}}</td>
              <td class="red">{{chartData.chronicIn[0]}}</td>
              <td class="red">{{chartData.chronicIn[1]}}</td>
              <td class="red">{{chartData.chronicIn[2]}}</td>
              <td>{{chartData.chronicIn[3]}}</td>
              <td>{{chartData.chronicIn[4]}}</td>
              <td class="red">{{chartData.beHospitalizedIn[0]}}</td>
              <td class="red">{{chartData.beHospitalizedIn[1]}}</td>
              <td class="red">{{chartData.beHospitalizedIn[2]}}</td>
              <td>{{chartData.beHospitalizedIn[3]}}</td>
              <td>{{chartData.beHospitalizedIn[4]}}</td>
              <td>{{chartData.beHospitalizedIn[5]}}</td>
              <td>{{chartData.beHospitalizedIn[6]}}</td>
              <td>本市</td>
              <td class="red">{{chartData.moveIn[0]}}</td>
              <td class="red">{{chartData.moveIn[1]}}</td>
              <td>{{chartData.moveIn[2]}}</td>
              <td class="red">{{chartData.moveIn[3]}}</td>
              <td>{{chartData.moveIn[4]}}</td>
            </tr>
            <tr>
              <td>退休</td>
              <td class="red">{{chartData.simpleClinicOut[0]}}</td>
              <td class="red">{{chartData.simpleClinicOut[1]}}</td>
              <td class="red">{{chartData.simpleClinicOut[2]}}</td>
              <td>{{chartData.simpleClinicOut[3]}}</td>
              <td class="red">{{chartData.chronicOut[0]}}</td>
              <td class="red">{{chartData.chronicOut[1]}}</td>
              <td class="red">{{chartData.chronicOut[2]}}</td>
              <td>{{chartData.chronicOut[3]}}</td>
              <td>{{chartData.chronicOut[4]}}</td>
              <td class="red">{{chartData.beHospitalizedOut[0]}}</td>
              <td class="red">{{chartData.beHospitalizedOut[1]}}</td>
              <td class="red">{{chartData.beHospitalizedOut[2]}}</td>
              <td>{{chartData.beHospitalizedOut[3]}}</td>
              <td>{{chartData.beHospitalizedOut[4]}}</td>
              <td>{{chartData.beHospitalizedOut[5]}}</td>
              <td>{{chartData.beHospitalizedOut[6]}}</td>
              <td>市外</td>
              <td class="red">{{chartData.moveOut[0]}}</td>
              <td class="red">{{chartData.moveOut[1]}}</td>
              <td>{{chartData.moveOut[2]}}</td>
              <td class="red">{{chartData.moveOut[3]}}</td>
              <td>{{chartData.moveOut[4]}}</td>
            </tr>
          </table>
          <div class="remark-content-wrapper">
            <p>注：</p>
            <div style="line-hieght:24px;">
              <p>{{chartData.remark[0]}}</p>
              <p style="overflow:hidden;">
                <span class="edit-txt">
                  {{txt1}}
                    <span v-show="!showEdit">{{txt3}}</span>
                    <input v-show="showEdit" type="number" class="money-num" v-model="txt3" v-focus="focusState"
                           @blur="hideBlur"/>
                  {{txt2}}
                </span>
                <svg class="edit-btn" v-show='!showEdit' @click="showEidtTxt" viewBox="0 0 1024 1024">
                  <path :d="svgPath.editBtn1"/>
                  <path :d="svgPath.editBtn2"/>
                </svg>
              </p>
              <p>{{chartData.remark[2]}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {setChartHeight, loadingOptTrans, svgPath} from '../../assets/js/utils.js'
  import {getTownWorksBasicMedicalData, setCollectionPlanMoney} from '../../api/last-api'
  import SingleListFilterWithoutCb from '../last/filter/single-list-filter-without-checkbox.vue'
  import DoubleCheckFilter from '../last/filter/double-check-filter.vue'
  import {getSearchItems, baseApiF} from '../../api/api'
  import {
    getDefaultAreaCode, getDefaultYear
  } from '../last/chart/utils/dataUtils'
  export default {
    name: "monthReport",
    components: {
      SingleListFilterWithoutCb,
      DoubleCheckFilter
    },
    data() {
      return {
        focusState: false,
        showEdit: false,
        chartData: {},
        filterN: null,
        showChartLoading: true,
        reportType: 'month',
        queryYear: '',
        areaId: '',
        beginMonthTemp: '01',
        endMonthTemp: '01',
        txt1: '2、全市征缴计划为',
        txt2: '万元。',
        txt3: 0,
        svgPath: svgPath,
        isLeftRightScroll: false,
        width: 0,
      }
    },
    // 自定义指令
    directives: {
      focus: {
        update: function (el, {value}) {
          if (value) {
            el.focus()
          }
        }
      }
    },
    watch: {
      showChartLoading(val, oldVal){
        setTimeout(() => {
          this.width = this.$refs.mainTable.clientWidth;
        }, 0)
      }
    },
    mounted(){
      this.myChart = this.$echarts.init(document.getElementById('monthReportExcelId'), null, {renderer: 'canvas'})
      // 显示进度条
      this.showChartLoading = true
      this.myChart.showLoading(loadingOptTrans)
      //获取筛选数据
      getSearchItems('init/initInput').then((res) => {
        if (res.code == 0) {
          this.filterN = res.data;
          this.areaId = getDefaultAreaCode(this.filterN).join(',')
          this.queryYear = getDefaultYear(this.filterN)

          setTimeout(() => {
            this.lastSelectYear = this.queryYear
            // 获取当前年份和月份
            let myDate = new Date();
            let curYear = myDate.getFullYear();
            let curMonth = myDate.getMonth() + 1;
            // 通过默认的年份选择项，动态变换月份的个数，例如2018，则月份为1,2,3,4
//            this.$refs.monthTypeId.changeSingleListData('month', this.queryYear)
            if (this.queryYear == curYear) {
              this.setReportAndMonthDefault(curMonth - 2)
            } else {
              this.setReportAndMonthDefault(0)
            }
            // 动态变换报告的类型
//            this.$refs.reportTypeId.changeSingleListData('reportType', this.queryYear)

            // 根据初始化的参数，加载数据
            this.getTownWorksBasicMedicalData()
          }, 500)
        }
      });

//      document.addEventListener('scroll', this.handleScroll, true)
      document.querySelector('.el-main').onscroll = function (e) {
        e = e || window.event;
        let scrollTop = e.target.scrollTop;
        let scrollLeft = e.target.scrollLeft;
        if (this.delWindowX && this.delWindowY) {
          if (this.delWindowX !== scrollLeft) {
            if (!this.leftRightScrollOne) {
              this.upDownScrollOne = false
              console.log('左右滚动')
              this.isLeftRightScroll = false

              this.leftRightScrollOne = true
            }
          } else if (this.delWindowY !== scrollTop) {
            if (!this.upDownScrollOne) {
              this.leftRightScrollOne = false
              console.log('上下滚动')
              this.isLeftRightScroll = true

              this.upDownScrollOne = true
            }
          }
        }
        this.delWindowX = scrollLeft;
        this.delWindowY = scrollTop;
      }
//      this.setDataIntoCharts(require('./monthReport.json').data)
    },
    methods: {
      showEidtTxt(){
        this.showEdit = true;
        this.focusState = true;
      },
      hideBlur(){
        this.showEdit = false;
        this.focusState = false;
        if (this.txt3 < 0) {
          this.txt3 = '';
          return;
        }
        setCollectionPlanMoney(this.txt3, this.queryYear)
      },
      importExcelReport(){
        let importExcelUrl = baseApiF() +
          `excel/exportTownWorksBasicMedicareExcel?areaId=${this.areaId}&beginDate=${this.queryYear + this.beginMonthTemp}&endDate=${this.queryYear + this.endMonthTemp}`
        return importExcelUrl
      },
      getSelectReportYYMM(){
        if (this.beginMonthTemp == this.endMonthTemp) {
          return ` ${this.queryYear} 年 ${this.beginMonthTemp} 月`
        } else {
          return ` ${this.queryYear} 年 ${this.beginMonthTemp} 月 ～ ${this.queryYear} 年 ${this.endMonthTemp} 月`
        }
      },
      confirmSingleSelectPlanArea(filter) {
        this.areaId = filter.join(',')
        this.getTownWorksBasicMedicalData();
      },
      confirmSingleSelectYears(filter) {
        this.queryYear = filter + ''
        // 获取当前年份和月份
        let myDate = new Date();
        let curYear = myDate.getFullYear();
        let curMonth = myDate.getMonth() + 1;
        if (this.queryYear == curYear) {
          this.setReportAndMonthDefault(curMonth - 2)
        } else {
          if (this.lastSelectYear == curYear) {
            this.setReportAndMonthDefault(0)
          }
        }
        // 设置上一个选择年份为
        this.lastSelectYear = this.queryYear
        this.getTownWorksBasicMedicalData();
      },
      setReportAndMonthDefault(position) {
        // 动态变换月份的值，例如当前时间是20180415，则可选择的月份为1,2,3,4
        this.$refs.yearTypeId.changeSingleListData('year', this.queryYear)
        this.$refs.monthTypeId.changeSingleListData('month', this.queryYear)
        this.$refs.monthTypeId.setCurrentSelectPosition(position)
        // 当前月份等于position + 1
        if (position >= 0) {
          this.$refs.monthTypeId.setCurrentSelectPosition(position)
        } else {
          this.queryYear = this.queryYear - 1
          position = 11
          this.$refs.monthTypeId.setCurrentSelectPosition(position)
        }
        let startDateTem = position + 1
        this.beginMonthTemp = startDateTem < 10 ? '0' + startDateTem : '' + startDateTem
        this.endMonthTemp = this.beginMonthTemp
        this.$refs.monthTypeId.setIsVisible(true)
        // 动态变换报告的类型
        this.reportType = 'month'
        this.$refs.reportTypeId.changeSingleListData('reportType', this.queryYear)
        this.$refs.reportTypeId.setCurrentSelectPosition(0)
      },
      confirmSingleSelectMonth(filter) {
        if (this.reportType == 'month') {
          this.beginMonthTemp = filter < 10 ? '0' + filter : '' + filter
          this.endMonthTemp = this.beginMonthTemp
        } else if (this.reportType == 'season') {
          let endDateTem = 3 * filter
          let startDateTem = endDateTem - 2
          this.beginMonthTemp = startDateTem < 10 ? '0' + startDateTem : '' + startDateTem
          this.endMonthTemp = endDateTem < 10 ? '0' + endDateTem : '' + endDateTem
        } else if (this.reportType == 'halfYear') {
          let endDateTem = 6 * filter
          let startDateTem = endDateTem - 5
          this.beginMonthTemp = startDateTem < 10 ? '0' + startDateTem : '' + startDateTem
          this.endMonthTemp = endDateTem < 10 ? '0' + endDateTem : '' + endDateTem
        } else if (this.reportType == 'wholeYear') {

        }
        this.getTownWorksBasicMedicalData();
      },
      confirmSingleSelectReportType(filter){
        console.log('月报类型：' + filter)
        if (filter == 1) {
          this.$refs.monthTypeId.setIsVisible(true)
          this.reportType = 'month'

          // 获取当前年份和月份
          let myDate = new Date();
          let curYear = myDate.getFullYear();
          let curMonth = myDate.getMonth() + 1;
          // 通过默认的年份选择项，动态变换月份的个数，例如2018，则月份为1,2,3,4
//          this.$refs.monthTypeId.changeSingleListData('month', this.queryYear)
          if (this.queryYear == curYear) {
            this.setReportAndMonthDefault(curMonth - 2)
          } else {
            this.setReportAndMonthDefault(0)
          }

//          // 动态变换月份的值，例如当前时间是20180415，则可选择的月份为1,2,3,4
//          this.$refs.monthTypeId.changeSingleListData('month', this.queryYear)
//          this.$refs.monthTypeId.setCurrentSelectPosition(0)
//          // 设置开始日期和结束日期
//          this.beginMonthTemp = '01'
//          this.endMonthTemp = '01'
        } else if (filter == 2) {
          this.$refs.monthTypeId.setIsVisible(true)
          this.reportType = 'season'
          this.$refs.monthTypeId.changeSingleListData('season', this.queryYear)
          this.$refs.monthTypeId.setCurrentSelectPosition(0)
          // 设置开始日期和结束日期
          this.beginMonthTemp = '01'
          this.endMonthTemp = '03'
        } else if (filter == 3) {
          this.$refs.monthTypeId.setIsVisible(true)
          this.reportType = 'halfYear'
          this.$refs.monthTypeId.changeSingleListData('halfYear')
          this.$refs.monthTypeId.setCurrentSelectPosition(0)
          // 设置开始日期和结束日期
          this.beginMonthTemp = '01'
          this.endMonthTemp = '06'
        } else if (filter == 4) {
          this.reportType = 'wholeYear'
          this.$refs.monthTypeId.setIsVisible(false)
          // 设置开始日期和结束日期
          this.beginMonthTemp = '01'
          this.endMonthTemp = '12'
        }
        this.getTownWorksBasicMedicalData();
      },
      getTownWorksBasicMedicalData() {
        // 显示进度条
        this.showChartLoading = true
        this.myChart.showLoading(loadingOptTrans)

        getTownWorksBasicMedicalData(this.areaId, this.queryYear + this.beginMonthTemp, this.queryYear + this.endMonthTemp
        ).then((resp) => {
          // 隐藏进度条
          this.myChart.hideLoading();
          this.showChartLoading = false

          if (resp.code == 0) {
            this.setDataIntoCharts(resp.data)
          }
        })
      },
      setDataIntoCharts(chartData) {
        this.chartData = chartData
        let length = chartData.remark[1].length;
        let length1 = chartData.remark[1].indexOf('为')
        let length2 = chartData.remark[1].indexOf('万')
        this.txt1 = chartData.remark[1].slice(0, length1 + 1)
        this.txt2 = chartData.remark[1].slice(length2, length)
        this.txt3 = chartData.remark[1].slice(length1 + 1, length2)
      }
    }
  }
</script>

<style lang="scss" scoped>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  .money-num {
    border: 1px solid #666;
    /*border-radius:3px;*/
    background: none;
    width: 80px;
    color: #fff;
    margin: 0 5px;
  }

  .edit-txt {
    float: left;
  }

  .edit-btn {
    float: left;
    margin-left: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    fill: #0a82d8;
    margin-top: 6px;
  }

  .edit-btn:hover {
    fill: #fff;
  }

  .month-report-all-wrapper {
    padding: 20px;
    margin-top: 70px;
  }

  .month-report-wrapper {
    color: #fff;
    padding: 50px 0;
    z-index: 600;
    background: #1B2B44;
    width: 100%;
  }

  .report-title-text-wrapper {
    font-size: 20px;
    height: 50px;
    width: 100%;
    line-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #22303D;
    box-shadow: 0 10px 5px #192739;
  }

  .report-title-text {
    font-size: 16px;
  }

  .right-top-tip-wrapper {
    height: 50px;
    line-height: 50px;
    float: right;
    margin-right: 20px;
    padding-left: 10px;
    border-radius: 5px;
    position: absolute;
    right: 0;
    top: 90px;
    z-index: 10000;
    background: #1B2B44;
  }

  .main-table-wrapper {
    margin-top: 20px;
    position: relative;
    background: #1B2B44;
  }

  .table1-wrapper {
    position: absolute;
    background: #1B2B44;
  }

  .remark-content-wrapper {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    padding: 20px;
    line-height: 32px;
    background: #1B2B44;
  }

  .main-table-top-left {
    display: inline-block;
    margin-left: 20px;
  }

  .main-table-top-right {
    display: inline-block;
    float: right;
    margin-right: 10px;
  }

  .main-table-top {
    height: 20px;
    line-height: 20px;
    margin-bottom: 5px;
  }

  td {
    border: solid 1px #fff;
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    min-width: 75px;
  }

  .td-yellow-bg {
    border: solid 1px #fff;
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    min-width: 75px;
    background: #1380E1;
  }

  .td-bg-without-border {
    border: none;
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    min-width: 75px;
  }

  .td-yellow-bg-without-border {
    border: none;
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    min-width: 75px;
    background: #1380E1;
  }

  .red {
    color: #00f4ff;
  }

  .import-excel-text {
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    padding: 0 15px;
    border-radius: 5px;
    line-height: 32px;
    background: #0a82d8;
  }

  .import-excel-text:hover {
    background: #1e69d4;
  }

</style>
